// 1.从 vue-router 中按需导入两个方法
// createRouter 方法用于创建路由的实例对象
// createWebHashHistory 用于指定路由的工作模式 (hash 模式)
import { createRouter, createWebHashHistory } from 'vue-router'

// 2. 导入组件,这些组件将要以路由的方式,来控制他们的切换
import Home from '../components/MyHome.vue'

// 3.创建路由实例对象
const router = createRouter({
    history: createWebHashHistory(),
    // 指定被激活的路由链接,会应用 router-active 这个类名
    // 默认的 router-link-active 类名会被覆盖掉
    linkActiveClass: 'router-active',
    routes: [
        // 路由重定向
        { path: '/', redirect: '/home' },
        // 注意：命名路由的 name 值不能重复，必须保证唯一性！
        { name:'home',path: '/home', component: Home },
        { name:'movie',path: '/movie/:mid', component: () => import('../components/MyMoive.vue') },
        {
            name:'about',path: '/about', component: () => import('../components/MyAbout.vue'), 
            redirect:'/about/tab1',
            children: [
                // { path: '', redirect: '/about/tab1' },
                { path: 'tab1', component: () => import('../components/tabs/MyTab1.vue') },
                { path: 'tab2', component: () => import('../components/tabs/MyTab2.vue') },
            ]
        },
        // vue-router4.x 需要正则
        { path:'/:pathMatch(.*)',name:'error',component:()=>import('../components/NotFound.vue'),meta:{ title:'404' } }
    ]
})


export default router